<template>
    <div id="map">
        <div class="MapTool">
            <el-checkbox-group v-model="checkList">
                <el-checkbox label="OSM" @change="checked=>layerCtl(checked,0)"></el-checkbox>
                <el-checkbox label="矢量图层" @change="checked=>layerCtl(checked,1)"></el-checkbox>
                <el-checkbox label="矢量注记" @change="checked=>layerCtl(checked,2)"></el-checkbox>
                <el-checkbox label="影像图层" @change="checked=>layerCtl(checked,3)"></el-checkbox>
                <el-checkbox label="影像注记" @change="checked=>layerCtl(checked,4)"></el-checkbox>
            </el-checkbox-group>
        </div>
    </div>
</template>

<script>
    import {Map, View} from 'ol'
    import {XYZ, OSM} from 'ol/source'
    import TileLayer from 'ol/layer/Tile'
    export default {
        name: "LayerControl",
        data(){
            return{
                map:null,
                checkList:["OSM"]
            }

        },
        mounted(){
            var osm = new TileLayer({
                name: "OSM",
                source: new OSM()//加载OpenStreetMap
            })
            var TiandiMap_vec = new TileLayer({
                name: "天地图矢量图层",
                source: new XYZ({
                    url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=9893433c99cfb657e6ec3a92fe4068e5",
                }),
                visible:false
            });
            var TiandiMap_cva = new TileLayer({
                name: "天地图矢量注记图层",
                source: new XYZ({
                    url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=9893433c99cfb657e6ec3a92fe4068e5",
                    wrapX: false
                }),
                visible:false
            });
            var TiandiMap_img = new TileLayer({
                name: "天地图影像图层",
                source: new XYZ({
                    url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=9893433c99cfb657e6ec3a92fe4068e5",
                }),
                visible:false
            });
            var TiandiMap_cia = new TileLayer({
                name: "天地图影像注记图层",
                source: new XYZ({
                    url: "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=9893433c99cfb657e6ec3a92fe4068e5",
                }),
                visible:false
            });
            this.map=new Map({
                target:'map',
                layers:[osm, TiandiMap_vec, TiandiMap_cva, TiandiMap_img, TiandiMap_cia],
                view:new View({
                    center: [113.24981689453125, 23.126468438108688],
                    projection: "EPSG:4326",
                    zoom: 12
                })
            })

        },
        methods:{
            layerCtl(checked,index){
                console.log(checked)
                let layers = this.map.getLayers();
                console.log(layers)
                layers.getArray()[index].setVisible(checked)
            }
        }
    }
</script>

<style scoped>
    .MapTool{
        position: absolute;
        top:50px;
        right: 50px;
        z-index: 9999;
    }
</style>